<template>
  <div class="wrapper">
    <div class="wrapper">
      <div class="return">
        <img class="returnImg" src="../../../assets/static/publicImg/back.png">
      </div>
      <div class="Payment methodDiv">
        <span class="Payment method">支付方式</span>
      </div>
    </div>
    <div class="wrapper">
      <div class="wrapper">
        <div class="wrapper">
          <div class="Upper left">
            <img class="Upper leftImg" src="../../../assets/static/scan/3.png"><!--  左上  -->
          </div>
          <div class="Upper right">
            <img class="Upper rightImg" src="../../../assets/static/scan/6.png"><!--  右上  -->
          </div>
        </div>
        <div class="middle">
          <img class="middleImg" src="../../../assets/static/scan/4.png"><!--  中间  -->
        </div>
        <div class="return">
          <div class="Lower left">
            <img class="Lower leftImg" src="../../../assets/static/scan/5.png"><!--  左下  -->
          </div>
          <div class="lower right">
            <img class="lower rightImg" src="../../../assets/static/scan/2.png"><!--  右下  -->
          </div>
        </div>
      </div>
      <div class="wrapper">
        <div class="button">
          <img class="buttonImg" src="../../../assets/static/scan/1.png" >
        </div>
        <div class="Select PictureDiv">
          <span class="Select Picture">选择图片</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Middle',
  components: {
  },
  data() {
    return {
      artical: [
        {}
      ],
    }
  },
  methods: {},
  mounted() {
  }
}
</script>

<style scoped>
/*-------------- div居中 -----------------*/
.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.return{
  display: flex;
  align-items: center;
  justify-content: center;
}
.Payment methodDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.Upper left{
  display: flex;
  align-items: center;
  justify-content: center;
}
.Upper right{
  display: flex;
  align-items: center;
  justify-content: center;
}
.Lower left{
  display: flex;
  align-items: center;
  justify-content: center;
}
.lower right{
  display: flex;
  align-items: center;
  justify-content: center;
}
.middle{
  display: flex;
  align-items: center;
  justify-content: center;
}
.button{
  display: flex;
  align-items: center;
  justify-content: center;
}
.Select PictureDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*-------------- span字体 -----------------*/
.Payment method{
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.Select Picture{
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
/*-------------- img图片 -----------------*/
.returnImg{
  width: 750px;
  height: 1624px;
}
.Upper leftImg{
  width: 750px;
  height: 1448px;
  background: #000000;
  opacity: 0.5;
}
.Upper rightImg{
  width: 750px;
  height: 1448px;
  background: #000000;
  opacity: 0.5;
}
.Lower leftImg{
  width: 750px;
  height: 1448px;
  background: #000000;
  opacity: 0.5;
}
.lower rightImg{
  width: 750px;
  height: 1448px;
  background: #000000;
  opacity: 0.5;
}
.middleImg{
  width: 750px;
  height: 1448px;
  background: #000000;
  opacity: 0.5;
}
.buttonImg{
  width: 750px;
  height: 1448px;
  background: #000000;
  opacity: 0.5;
}
</style>
